<template> 
    <component v-if="ctrlModule" :is="ctrlModule" v-model="model"
        :width="width"
        :codeType="codeType"
        :clearable="clearable"
        :disabled="disabled"
        :filterable="filterable"
        :placeholder="placeholder"
        :condition="condition"
        :multipleLimit="multipleLimit"
        :checkAll="checkAll"
        :leafable="leafable"
        :disabledKeys="disabledKeys"
        :type="type"
        @change="change"></component>
    <div v-else>未发现模块:{{type}}</div>
</template>
<script>
export default {
    props : {
         value : null,
        //dxText,dxSelect,dxCheckbox,dxRadio,dxTreeselect,input
        width: String,
        type : {type : String ,default : ''},
        codeType : {type : String},
        clearable : {type:Boolean,default:false},
        disabled : {type : Boolean,default : false},
        filterable : {type:Boolean,default:false},
        placeholder : {type:String ,default:'请选择'},
        condition : {type:Object,default:()=>{}},
        multipleLimit : {type:Number,default:0},
        checkAll : {type:Boolean ,default:true},
        leafable : { type: Boolean, default: false }, //是否可以只选择子叶
        disabledKeys : Array
    },
    computed : {
        ctrlModule(){
            try{
                let moduleName = this.type;
                console.log('moduleName-->',moduleName)
                if(moduleName=='input' || moduleName=='switch' 
                    || moduleName == 'textarea' || moduleName=='simpleswitch' 
                    || moduleName=='date' || moduleName == 'datetime'){

                    moduleName = 'ctrl';
                }
                let mModule = resolve => require.ensure([], () => resolve(require(`./dx-${moduleName}.vue`)));
                mModule(scope=>{
                    // for(let prop in this.props){
                    //     if(scope.props[prop]){
                    //         scope.props[prop] = this.props[prop];
                    //     }
                    // }
                    // console.log(scope,'------->>>')
                });
               
                return mModule;
            }catch(e){
                console.log(e);
                return null;
            }
        },
        model : {
            get(){
                let mValue = this.value;

                if(!Array.isArray(mValue) && (this.type=='multiselect' || this.type=='checkbox' || this.type=='multitreeselect')){//多选
                    mValue = this.value ? _.compact(this.value.split(",")) : [];
                }
                if(this.type=='simpleswitch'||this.type=='switch'){
                    mValue = this.value && (this.value=='true' || this.value=='1') ? true : false;
                }
                return mValue;
            },
            set(value){
                let mValue = (value && Array.isArray(value) ?  value.join(",") : value);
                mValue = mValue && (mValue===!!mValue) ? (mValue ? 1 : 0) : mValue;
                this.$emit('input', mValue); // key code 
            }
        }
    },
    methods : {
        change(val){

            this.$emit('change',val);
        },
        clearHandler(val){
            this.$emit('clear',val);
        }
    },
    data(){
        return {
        }
    }
}
</script>

